<template>
    <div ref="parent" class="gamemap">
        <!-- 加上tabindex输入用户操作 -->
    <canvas ref="canvas" tabindex="0">

    </canvas>

    </div>
</template>

<script>
import { GameMap } from '@/assets/script/GameMap.js';
import { ref, onMounted } from 'vue';
import { useStore } from 'vuex';

export default {
    setup() {
        const store = useStore();
        let parent = ref(null);
        let canvas = ref(null);

        onMounted(() => { // 组件挂在完之后创建地图
            store.commit("updateGameObject", new GameMap(canvas.value.getContext('2d'), parent.value, store));
        })
        return {   
            parent, 
            canvas
        }
    }
}
</script>

<style scoped>
    div.gamemap {
        width: 100%;
        height: 100%;
        display: flex;
        /* 水平居中 */
        justify-content: center;
         /* 竖直居中 */
         align-items: center;
    }
</style>